<template>
  <div class="linkUs">
    <div class="topheader"></div>
    <div class="warpcontent">
      <div class="title">HELLO!您好</div>
      <div class="content">
        <div class="leftbox">
          <div class="tittle">关于项目招商APP，希望与您更多的交流</div>
          <div class="warpform">
            <p>名字<span class="red">*</span></p>
            <input type="text" v-model="name" />
          </div>
          <div class="warpform">
            <p>联系方式<span class="red">*</span></p>
            <input type="text" v-model="phone" />
          </div>
          <div class="warpform">
            <p>内容<span class="red">*</span></p>
            <textarea v-model="content"></textarea>
          </div>
          <div class="yzm">
            <div class="warpform">
              <p>验证码<span class="red">*</span></p>
              <input v-model="code" />
              <button :disabled="clicked" class="getyzm" @click="getYzm">
                {{ !clicked ? "获取验证码" : timer + "秒后" }}
              </button>
            </div>
          </div>
          <div class="warpform btnwarp">
            <button @click="submitForm">提交</button>
          </div>
        </div>
        <div class="rightbox">
          <div class="topbox">
            <div class="imagewarp">
              <img src="/image/aboutus/callme.png" alt="" />
              <img src="/image/aboutus/email.png" alt="" />
            </div>
            <div class="addresswarp">
              <div><span>企业电话: </span><span>400-0099-771</span></div>
              <div>
                <p>guanwangyunying@shengyihui.org</p>
              </div>
            </div>
          </div>
          <baidu-map
            :center="center"
            :zoom="zoom"
            :scroll-wheel-zoom="true"
            @ready="handler"
            class="bm-view"
            ak="pjGKpw6QkeEaI0j8fbMKFl5gostsGF3K"
          >
            <bm-map-type
              :map-types="['BMAP_HYBRID_MAP', 'BMAP_NORMAL_MAP']"
              anchor="BMAP_ANCHOR_TOP_RIGHT"
            ></bm-map-type>
            <bm-city-list
              anchor="BMAP_ANCHOR_TOP_RIGHT"
              :offset="{ width: 100, height: 10 }"
            ></bm-city-list>
            <bm-geolocation
              anchor="BMAP_ANCHOR_BOTTOM_RIGHT"
              :showAddressBar="true"
              :autoLocation="true"
            ></bm-geolocation>
            <bm-marker :position="{ lng: 121.491409, lat: 31.116009 }">
            </bm-marker>
          </baidu-map>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import BaiduMap from "vue-baidu-map/components/map/Map.vue"; // 局部注册
import BmGeolocation from "vue-baidu-map/components/controls/Geolocation.vue"; //定位
import BmMapType from "vue-baidu-map/components/controls/MapType.vue"; //地图类型
import BmCityList from "vue-baidu-map/components/controls/CityList.vue"; //城市列表
import BmMarker from "vue-baidu-map/components/overlays/Marker.vue"; //标记 点
import axios from "axios";
export default {
  components: { BaiduMap, BmGeolocation, BmCityList, BmMapType, BmMarker },
  data() {
    return {
      center: { lng: 121.491409, lat: 31.116009 },
      zoom: 3,
      code: "",
      content: "",
      name: "",
      phone: "",
      type: 0,
      clicked: false,
      timer: 60
    };
  },
  methods: {
    submitForm() {
      if (!this.name) {
        this.$msg.error("请输入用户名");
        return false;
      }
      if (!this.phone) {
        this.$msg.error("请输入手机号码");
        return false;
      }
      if (!this.content) {
        this.$msg.error("请输入要留言的内容");
        return false;
      }
      if (!this.code) {
        this.$msg.error("请输入验证码");
        return false;
      }
      axios
        .post("/officialwebsiteapi/question/apiCreateQuestion", {
          item: {
            code: this.code,
            content: this.content,
            name: this.name,
            phone: this.phone,
            type: 0
          }
        })
        .then(res => {
          this.clicked = false;
          this.timer = 60;
          if (res.data.code === 1000) {
            this.code = "";
            this.content = "";
            this.name = "";
            this.phone = "";
            this.$msg.success("留言成功");
          }else{
            this.$msg.error(res.data.msg)
          }
        });
    },
    getYzm() {
      if (!this.phone && !/^1[3456789]\d{9}$/.test(this.phone)) {
        this.$msg.error("请输入正确的手机号码");
        return false;
      }
      this.clicked = true;
      let clear = setInterval(() => {
        this.timer = this.timer - 1;
        if (this.timer <= 0) {
          clearInterval(clear);
          this.clicked = false;
          this.timer = 60;
        }
      }, 1000);
      axios
        .get(`/officialwebsiteapi/msgCode/getMsgCode?phone=${this.phone}`)
        .then(res => {});
    },
    handler({ BMap, map }) {
      this.center.lng = 121.491409;
      this.center.lat = 31.116009;
      this.zoom = 15;
    }
  }
};
</script>
<style lang="scss" scoped>
.topheader {
  height: 575px;
  background: url("http://syg-photo.oss-cn-shanghai.aliyuncs.com/yingdin/photo/linkUsbg.png-1593655066000")no-repeat;
  background-size: 100% 100%;
}
.warpcontent {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  .title {
    font-size: 37px;
    line-height: 134px;
    letter-spacing: 3px;
    color: #4b4b4b;
  }
}
.content {
  padding-bottom: 100px;
  width: 1200px;
  justify-content: space-between;
  display: flex;
  .leftbox {
    font-size: 19px;
    color: #515862;
  }
  .warpform {
    margin-top: 40px;
    input,
    textarea {
      width: 539px;
      outline: none;
      height: 50px;
      font-size: 20px;
      text-indent: 14px;
      line-height: 50px;
      margin-top: 10px;
    }
    textarea {
      height: 300px;
      resize: none;
    }
  }
  .yzm {
    input {
      width: 389px;
      outline: none;
      height: 50px;
      font-size: 20px;
      text-indent: 14px;
      line-height: 50px;
      margin-top: 10px;
    }
    button {
      height: 54px;
      font-size: 20px;
      line-height: 54px;
      width: 159px;
    }
  }
  .btnwarp {
    margin-top: 27px;
    display: flex;
    justify-content: flex-end;
    button {
      width: 142px;
      border-radius: 6px;
      height: 49px;
      background-color: #2190c1;
      font-size: 24px;
      line-height: 49px;
      text-align: center;
      color: #ffffff;
      border: 0;
      outline: none;
      cursor: pointer;
    }
  }
  .rightbox {
    width: 446px;
    .topbox {
      display: flex;
    }
    .imagewarp {
      display: flex;
      flex-direction: column;
      align-items: center;
      width: 60px;
      img {
        max-width: 36px;
      }
      img:nth-of-type(2) {
        margin: 38px 0 42px;
      }
    }
    .addresswarp {
      margin-left: 19px;
      font-size: 19px;
      letter-spacing: 1px;
      color: #7b7972;
      span {
        font-size: 19px;
        letter-spacing: 1px;
        color: #0988b9;
      }
      div:first-of-type {
        margin-top: 10px;
      }
      div:nth-of-type(2) {
        margin-top: 41px;
      }
      div:last-of-type {
        margin-top: 43px;
        font-size: 19px;
        color: #0988b9;
      }
    }
    .bm-view {
      margin-top: 100px;
      width: 466px;
      height: 452px;
    }
  }
}
.red {
  color: red;
}
.map {
  width: 593px;
  height: 464px;
}
</style>
